<template>
  <div style="padding: 0px 20px">
    <div class="table-container" style="background: #fff">
      <div style="display: flex; justify-content: center; padding: 20px">
        <div style="display: flex; align-items: center; flex: 1">
          <el-row>
            <button :class="['menu-btn', tableKey == '' ? 'checkBtn' : '']" @click="fiflterData()">全部</button>
            <button :class="['menu-btn', tableKey == '1' ? 'checkBtn' : '']" @click="fiflterData(1)">2025</button>
            <button :class="['menu-btn', tableKey == '2' ? 'checkBtn' : '']" @click="fiflterData(2)">2024</button>
            <button :class="['menu-btn', tableKey == '3' ? 'checkBtn' : '']" @click="fiflterData(3)">2023</button>
          </el-row>
        </div>

        <div style="display: flex; justify-content: right; align-items: center; flex: 1">
          <el-form
            ref="form"
            :inline="true"
            :model="queryForm"
            @submit.native.prevent
            style="display: flex; justify-content: center; align-items: center"
          >
            <el-select v-model="queryForm.department" placeholder="部门" style="width: 160px; margin-right: 10px">
              <el-option label="一部" value="一部"></el-option>
              <el-option label="二部" value="二部"></el-option>
              <el-option label="三部" value="三部"></el-option>
              <el-option label="四部" value="四部"></el-option>
              <el-option label="五部" value="五部"></el-option>
              <el-option label="研发部" value="研发部"></el-option>
            </el-select>
            <el-input v-model="queryForm.title" placeholder="项目名称/费用号" style="width: 200px" />
          </el-form>
        </div>
      </div>

      <el-table
        ref="tableSort"
        :data="list"
        :element-loading-text="elementLoadingText"
        :height="height"
        @selection-change="setSelectRows"
        :show-header="false"
        @row-click="openDetails"
        style="width: 100%"
      >
        <el-table-column label="项目名称" prop="" fixed="left" width="240">
          <template #default="{ row }">
            <div style="display: flex; padding: 16px">
              <div style="flex: 0 0 60px">
                <el-avatar size="large" class="ava-style" :style="row.color">
                  {{ row.projectName?.charAt(0) }}
                </el-avatar>
              </div>
              <div style="margin-left: 10px; display: flex; flex-direction: column; align-items: left; justify-content: center">
                <div style="font-size: 16px; font-weight: 600">
                  {{ row.projectName }}
                </div>
                <div>
                  {{ row.costNumber }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="" prop="">
          <template #default="{ row }">
            <el-descriptions direction="vertical" :column="14" border>
              <el-descriptions-item label="设备类型">
                <el-tag
                  size="mini"
                  effect="dark"
                  :color="
                    row.deviceType == 1
                      ? '#1e90ff'
                      : row.deviceType == 2
                      ? '#6b8e23'
                      : row.deviceType == 3
                      ? '#7b68ee'
                      : row.deviceType == 4
                      ? '#32cd32'
                      : row.deviceType == 5
                      ? '#ff00ff'
                      : row.deviceType == 6
                      ? '#3cb371'
                      : row.deviceType == 7
                      ? '#b8860b'
                      : row.deviceType == 8
                      ? '#ffa500'
                      : '#6495ed'
                  "
                >
                  {{
                    row.deviceType == 1
                      ? '夹具化成'
                      : row.deviceType == 2
                      ? '夹具分容'
                      : row.deviceType == 3
                      ? 'DCR'
                      : row.deviceType == 4
                      ? 'OCV'
                      : row.deviceType == 5
                      ? 'LPM'
                      : row.deviceType == 6
                      ? '分选机'
                      : row.deviceType == 7
                      ? '仪器'
                      : row.deviceType == 8
                      ? '化成分容一体机'
                      : ''
                  }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="驱动箱类型">
                <b>{{ row.drive_box_type ? row.drive_box_type : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="设备数量">
                <b>{{ row.devices_number ? row.devices_number + '台' : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="单台治具数量/通道">
                <b>{{ row.fixtures_channels ? row.fixtures_channels : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="项目担当">
                <b>{{ row.project_manager ? row.project_manager : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="软件主负责">
                <b>{{ row.software_main_manager ? row.software_main_manager : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="软件负责人">
                <b>{{ row.software_manager ? row.software_manager : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="充放电负责人">
                <b>{{ row.charge_discharge_manager ? row.charge_discharge_manager : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="视觉负责人">
                <b>{{ row.visual_director ? row.visual_director : '-' }}</b>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="厂内项目目前情况">
                <b>{{ row.totalProNum }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="现场客户现场情况">
                <b>{{ row.sbNum }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="厂内FAT时间">
                <b>{{ row.totalProNum }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="设备发货时间">
                <b>{{ row.sbNum }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="客户现场FAT时间">
                <b>{{ row.totalNgNum }}</b>
              </el-descriptions-item> -->
            </el-descriptions>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import VabChart from '@/plugins/echarts'

  import { getProjectList } from '@/api/wordOrder'

  export default {
    name: 'project',
    filters: {},
    components: {
      VabChart,
    },
    data() {
      return {
        filterData: {
          day: '',
          week: '',
          month: '',
          year: '',
        },
        tableKey: '',
        fileList: [],
        imgShow: true,
        list: [],
        imageList: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
          year: '',
          department: '',
        },
        optionMonth: {
          color: '#fac858',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
            },
          ],
        },
      }
    },
    computed: {
      height() {
        // return this.$baseTableHeight()
      },
    },
    created() {
      this.fetchData()
    },
    beforeDestroy() {},
    mounted() {},
    watch: {
      'queryForm.department'(newValue, oldValue) {
        this.handleQuery()
      },
      'queryForm.title'(newValue, oldValue) {
        this.handleQuery()
      },
    },
    methods: {
      openDetails(nodeData) {
        this.$router.push({ path: '/project/item', query: { id: nodeData.id } })
      },
      randomRgb(id) {
        let colorArry = [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#00fa9a',
          '#ffd700',
          '#6b8e23',
          '#ff00ff',
          '#3cb371',
          '#b8860b',
          '#30e0e0',
        ]
        return {
          background: colorArry[parseInt(id % 10)],
        }
      },
      handleShow(data) {
        this.$refs['vabUpload'].handleShow(data)
      },
      async fetchData() {
        const { data, total } = await getProjectList(this.queryForm)
        this.list = data
        this.total = total
        let _this = this
        this.list.forEach(function (item) {
          item.color = _this.randomRgb(item.id)
        })
      },
      fiflterData(type) {
        this.tableKey = type
        let year = ''
        switch (type) {
          case 1:
            year = '25'
            break
          case 2:
            year = '24'
            break
          case 3:
            year = '23'
            break
          default:
            break
        }
        this.queryForm.year = year
        this.handleQuery()
      },

      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      // handleRemove(file, fileList) {
      //   console.log(file, fileList)
      // },
      // handlePreview(file) {
      //   console.log(file)
      // },
      // handleExceed(files, fileList) {
      //   this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      // },
      // beforeRemove(file, fileList) {
      //   return this.$confirm(`确定移除 ${file.name}？`)
      // },
    },
  }
</script>
<style scoped>
  .ava-style {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
  }
</style>
<style lang="scss" scoped>
  .menu-btn {
    padding: 5px 16px;
    margin-right: 20px;
    border-radius: 32px;
    color: #4e5969;
    border: 0px;
    background: #fff;
  }
  .menu-btn:active {
    background: #f2f3f5;
  }
  // .content {
  //   margin: 20px 0px;
  // }
  /* 按钮悬浮颜色 */
  .menu-btn:hover {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  .menu-btn:focus {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  /* 按钮点击颜色 */
  .menu-btn:active {
    background: #f2f3f5;
    border-color: #f2f3f5;
  }
  .project {
    ::v-deep {
      .el-card__body {
        padding: 0;
      }
      .el-card__header {
        padding: 10px 12px;
      }
    }
  }
  .checkBtn {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
  }
</style>
